<template>
  <div>
    <a-modal
        title="管理规则"
        :destroyOnClose="true"
        :visible="this.managePopupVisible"
        :footer="null"
        :width="1400"
        @cancel="handleCancel"
    >
      <PublicHead
          :label="'显示名称'"
          :add="add"
          :on-search="onSearch"
      ></PublicHead>
      <CollapseBody :table-data="this.showTableDada"></CollapseBody>
      <ManageRulePopup></ManageRulePopup>
    </a-modal>
  </div>
</template>

<script>
import {mapMutations, mapState} from "vuex";
import PublicHead from "@/components/share/PublicHead";
import ManageRulePopup from "@/pages/systemManage/activation/manageRule/ManageRulePopup";
import CollapseBody from "@/pages/systemManage/activation/manageRule/CollapseBody";

export default {
  name: "ManageRule",
  components: {ManageRulePopup, PublicHead, CollapseBody},
  computed: {
    ...mapState('activation', ['managePopupVisible']),
    ...mapState('rule', ['showTableDada', 'tableData']),
  },
  methods: {
    ...mapMutations('activation', ['setState']),
    ...mapMutations('rule', {setRuleState: 'setState'}),
    handleCancel() {
      this.setState({name: 'managePopupVisible', value: false})
    },
    add() {
      this.setRuleState({name: 'rulePopupTitle', value: '新建'})
      this.setRuleState({name: 'rulePopupVisible', value: true})
    },
    onSearch(val) {
      let list = []
      if (val) {
        for (let tableDatum of this.tableData) {
          if (tableDatum.label.indexOf(val) >= 0) {
            list.push(tableDatum)
          }
        }
      } else {
        list = this.tableData
      }
      this.setRuleState({name: 'showTableDada', value: list})
    },
  }
}
</script>

<style scoped>

</style>
